<template>
	<view>
		<view class="vipUserBox">
			<view class="vipUserBg">
				<image src="../../static/vip.jpg" mode=""></image>
			</view>
			<view class="vipUserMain">
				<view class="vipUserTitle">
					{{userInfo.is_vip_str=='--'?'您还不是VIP':'尊贵的VIP会员'}}
				</view>
				<view class="vipUserTime">
					会员有效期：{{userInfo.is_vip_str=='--'?"--":userInfo.is_vip_str}}
				</view>
			</view>
		</view>
		
		<view class="mealList" v-if="userInfo.is_vip_str=='--'">
			<view :class="'mealLi '+(mealIndex==index?'activeMeal':'')" v-for="(item,index) in listData" :key="index" @click="selectMeal(index)" >
				<view class="mealTime">
					{{item.name}}
				</view>
				<view class="mealPrice">
					￥{{item.price}}
				</view>
				<view class="mealPrice2">
					￥{{item.market}}
				</view>
			</view>
		</view>
		
		<view class="mealBotton" @click="buyMeal" v-if="userInfo.is_vip_str=='--'">
			立即购买
		</view>
		
		<view class="noticeText" v-if="userInfo.is_vip_str=='--'">
			由于高额的服务器成本和技术团队维护，以及软件的升级，修复。个人已经无力承担。现在改成会员收费模式，希望大家理解，能让小程序正常运转下去，后期我们还会优化升级。
		</view>
		
		<view class="vipTitle">
			会员特权
		</view>
		<view class="roleList">
			<view class="roleLi" v-for="(item,index) in roliList" :key="index">
				<view class="roleImage">
					<image :src="'../../static/'+item.img+'.png'" mode=""></image>
				</view>
				<view class="roleText">
					{{item.name}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {pay} from '@/common/pay.js';
	export default {
		data() {
			return {
				listData:[],
				mealIndex:0,
				roliList:[
					{name:'导出表格',img:'vip1'},
					{name:'记工记账',img:'vip2'},
					{name:'工钱统计',img:'vip3'},
					{name:'对账',img:'vip4'},
					{name:'1V1技术支持',img:'vip5'},
					{name:'专属客服',img:'vip6'},
				],
				userInfo:{},
			}
		},
		onLoad(option) {
			
		},
		onShow: function() {
			this.getUserInfo()
		},
		onReady() {
			this.getMealList();
		},
		methods: {
			
			// 获取用户信息
			getUserInfo() {
				var _this = this;
				_this.$u.get('/api/user.index/getDetail', {}).then(res => {
					uni.hideLoading();
					console.log("==获取用户信息==");
					console.log(res);
					uni.setStorageSync('userInfo', res.data);
					_this.userInfo = res.data;
				}).catch(res => {
					console.log(res);
				})
			},
			// 获取默认工地
			getMealList() {
				var _this = this;
				_this.$u.get('/api/plus.meal/getList', {}).then(res => {
					_this.listData=res.data;
				})
			},
			
			selectMeal(index){
				this.mealIndex=index
			},
			
			
			buyMeal(){
				var _this = this;
				_this.$u.post('/api/plus.meal/add_order_samll', {
					id:_this.listData[_this.mealIndex].id
				}).then(res => {
					console.log('======res====')
					console.log(res)
					res.data.pay_type=20;
					pay(res, _this, function() {
						
						_this.getUserInfo()
						setTimeout(function() {
							// _this.getUserInfo()
							uni.showModal({
								title:'开通成功',
								content:"您已是永久会员",
								showCancel:false,
								success(){
									uni.navigateBack()
								}
							})
							
						}, 1000);
					}, function() {
						_this.getUserInfo()
					});
				})
			}
			
		}
	}
</script>
<style>
	page{
		background-color: #262834;
	}
</style>
<style scoped>
	.vipUserBox{
		width: 660rpx;
		height: 320rpx;
		margin: 50rpx auto;
		overflow: hidden;
		border-radius: 20rpx;
		position: relative;
	}
	.vipUserBg{
		width: 100%;
		height: 100%;
		
	}
	.vipUserBg image{
		width: 100%;
		height: 100%;
	}
	.vipUserMain{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 40rpx;
	}
	.vipUserTitle{
		color: #fff;
		font-size: 40rpx;
	}
	.vipUserTime{
		margin-top: 150rpx;
		color: #fff;
		font-size: 24rpx;
	}
	.mealList{
		width: 660rpx;
		margin: 0 auto;
		overflow: hidden;
	}
	.mealLi{
		background-color: #30323f;
		width: 310rpx;
		/* width: 100%; */
		height: 200rpx;
		float: left;
		border-radius: 10rpx;
		border: 2rpx solid #3d4051;
		color: #fff;
		text-align: center;
		margin-right: 28rpx;
	}
	.activeMeal{
		border: 2rpx solid #f90;
	}
	.mealLi:last-child{
		margin-right: 0;
	}
	.mealTime{
		margin-top: 20rpx;
	}
	.mealPrice{
		line-height: 90rpx;
		color: #f90;
	}
	.mealPrice2{
		text-decoration: line-through;
		font-size: 22rpx;
		color: #ccc;
	}
	.mealBotton{
		width: 660rpx;
		background-color: #f90;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		margin: 40rpx auto;
	}
	
	.noticeText{
		background-color:#30323f;
		width: 660rpx;
		margin: 0 auto;
		color: #ccc;
		padding: 20rpx;
		line-height: 50rpx;
	}
	.vipTitle{
		width: 660rpx;
		margin: 30rpx auto;
		color: #fff;
		font-size: 34rpx;
	}
	.roleList{
		width: 750rpx;
		margin: 0rpx auto;
		height: 400rpx;
	}
	.roleLi{
		width: 33.333%;
		text-align: center;
		float: left;
	}
	.roleImage{
		width: 90rpx;
		height: 90rpx;
		overflow: hidden;
		border-radius: 50%;
		margin: 10rpx auto;
		
	}
	.roleImage image{
		width: 100%;
		height: 100%;
	}
	.roleText{
		text-align: center;
		color: #fff;
		margin-bottom: 20rpx;
	}
</style>
